<template>
    <div>
        <el-form ref="postRef" :model="form" :rules="rules" label-width="auto">
            <el-form-item label="手机号">
                <el-input v-model="form.phone" placeholder="请输入手机号"/>
            </el-form-item>
            <el-form-item label="用户类型">
<!--                <el-select v-model="form.user_vip_level" placeholder="请选择用户类型">-->
<!--                    <el-option-->
<!--                        v-for="(item, index) in user_level_options"-->
<!--                        :key="index"-->
<!--                        :label="item[1]"-->
<!--                        :value="index"-->
<!--                    />-->
<!--                </el-select>-->
                <el-radio-group v-model="form.user_vip_level">
                    <el-radio
                        v-for="(item, index) in user_level_options"
                        :key="index"
                        :label="index"
                    >{{ item[0] }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="VIP到期时间">
                <el-date-picker
                    v-model="form.user_vip_time"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择VIP到期时间"
                />
            </el-form-item>
            <el-form-item label="&nbsp;">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import * as api from "@/api/user/user";
    import {formatTimestamp} from "@/utils/ruoyi";
    export default {
      name: 'ChangeUserLevel',
      components: {  },
      props: {
        uid: {
          type: Number,
          required: true
        },
      },
      data() {
        return {
          form: {},
          rules: {},
          user_level_options:[],
        };
      },
      mounted(){
        this.load_user_levels()
        this.load_user()
      },
      methods: {
        load_user(){
          api.getUser(this.uid).then(res => {
            console.log('res', res)
            const userinfo = res.data || {}
            this.form.value = {
              phone: userinfo.phone,
              user_vip_level: userinfo.vip_level,
              user_vip_time: formatTimestamp(userinfo.vip_time)
            }
          })
        },
        load_user_levels() {
          api.getUser(this.uid).then(res => {
              console.log(res)
              console.log(res.data)
              this.user_level_options = res.data.vip_list
              this.user_level_options.unshift(['普通用户', '0', '0', ''])
          })
        },
        submitForm() {
          this.$refs["postRef"].validate(valid => {
              this.form['id'] = this.uid
              // if (valid) {
              api.updateUser(this.form).then(response => {
                  this.$modal.msgSuccess("修改成功");
                  this.$emit('close')
              });
              // }
          });
        },
        cancel() {
          this.$emit('close')
        },
      }
    }
</script>

<style lang="scss" scoped>

</style>
